<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="./layui/css/layui.css"  media="all">
	<link rel="stylesheet" href="./css/common.css">
	<link rel="stylesheet" href="./css/holiday.css">
	<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
</head>
<body>
<div class="holiday">
	<div class="layui-form demoTable">
		<div class="layui-inline">
			<label class="layui-form-label">部门</label>
			<div class="layui-input-inline">
				<select name="department" id="department">
					<option value="">请选择部门</option>
					<option value="0">研发</option>
					<option value="1">运营</option>
				</select>
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">员工</label>
			<div class="layui-input-inline">
				<select name="employee" id="employee">
					<option value="">请选择员工</option>
					<option value="0">张三</option>
					<option value="1">李四</option>
				</select>
			</div>
		</div>

		<div class="layui-inline">
			<label class="layui-form-label">起止时间</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" name="test1" id="test1" placeholder="请选择开始日期" autocomplete="off">
			</div>
			<span class="separator">-</span>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" name="test2" id="test2" placeholder="请选择结束日期">
			</div>
		</div>
		<div class="layui-inline" style="margin-left: 20px;">
			<button class="layui-btn layui-btn-normal w92"  data-type="reload">查询</button>
		</div>
		<div class="layui-inline ml-20">
			<input type="checkbox" name="" title="设计报表" lay-skin="primary"/>
		</div>

		<div class="layui-inline">
			<button class="layui-btn layui-btn-normal w92" type="button" id="print">生成报表</button>
		</div>

		<!--<div class="layui-inline">-->
			<!--<button class="layui-btn w92" id="export" type="button">导出</button>-->
		<!--</div>-->
	</div>

	<div class="layui-btn-group ml-54 demoTable">
		<button class="layui-btn layui-btn-danger" data-type="getCheckData">批量删除</button>
	</div>

	<table class="layui-hide" id="holiday" lay-filter="test"></table>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="add">新增</a>
		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
</div>

<!--添加弹出层-->
<div  id="addMask" style="display: none;">
	<form class="layui-form setting-holiday" action="#" id=runForm" lay-filter="example">
		<div class="layui-form-item">
			<label class="layui-form-label">开始时间</label>
			<div class="layui-input-inline">
				<input type="text" class="layui-input" name="beginTime" id="beginTime" lay-verify="required" placeholder="请选择日期">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">结束时间</label>
			<div class="layui-input-inline">
				<input type="text" name="endTime" class="layui-input" id="endTime" lay-verify="required" placeholder="请选择日期">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">请假类型</label>
			<div class="layui-input-inline">
				<select name="holidayType">
					<option value=""></option>
					<option value="0">公出</option>
					<option value="1">病假</option>
					<option value="2">事假</option>
					<option value="3">探亲假</option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">原因</label>
			<div class="layui-input-inline">
				<input type="text" name="reason" class="layui-input" id="reason" placeholder="请输入原因">
			</div>
		</div>

		<div class="layui-form-item">
			<div class="layui-input-block">
				<button lay-submit class="layui-btn layui-btn-normal" lay-filter="formTest">确定</button>
				<button type="button" class="layui-btn layui-btn-primary cancel-layer">取消</button>
			</div>
		</div>
	</form>
</div>
<script src="./layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="./js/jquery-1.9.1.min.js" ></script>
<script>
	var layerIndex = null;
	$(function () {
        initLayUI();
    })
	

	function formatterType(type){
	    var result = '';
	    switch (type){
			case 0:
			    result = '公出';
			    break;
            case 1:
                result = '病假';
                break;
            case 2:
                result = '事假';
                break;
            case 3:
                result = '探亲假';
                break;
			default:
			    break;
		}
		return result;
	}

	function initLayUI(){
        layui.use(['form','laydate','layer','table'], function(){
            var form = layui.form;
            var laydate = layui.laydate;
            var table = layui.table;
            var layer = layui.layer;
            //起止时间1
            laydate.render({
                elem: '#test1'
            });
            //起止时间2
            laydate.render({
                elem: '#test2'
            });

            //日期时间选择器
            laydate.render({
                elem: '#beginTime'
                ,type: 'datetime'
            });

            //日期时间选择器
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'
            });

             table.render({
                elem: '#holiday'
                ,url:'./json/holiday.json'
                ,toolbar: true
                ,title: '用户数据表'
                ,cols: [[
                    // {field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true, totalRowText: '合计行'}
                    {type:'checkbox'}
                    ,{field:'username', title:'姓名'}
                    ,{field:'phone', title:'登记号码'}
                    ,{field:'beginTime', title:'开始时间', sort: true}
                    ,{field:'endTime', title:'结束时间', sort: true}
                    ,{field:'holidayType', title:'假类', width:100,templet: function(d){
                        return formatterType(d.holidayType);
						 }}
                    ,{field:'reason', title:'原因'}
                    ,{toolbar:'#barDemo',title:'操作'}
                ]]
                ,page: true
                ,response: {
                    statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
                }
                ,id:'testReload'
                ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
                    return {
                        "code": res.status, //解析接口状态
                        "msg": res.message, //解析提示文本
                        "count": res.total, //解析数据长度
                        "data": res.rows.item //解析数据列表
                    };
                }
            });


            //监听工具条
            table.on('tool(test)', function(obj){
                var data = obj.data;
                if(obj.event === 'add'){
                    //传入add逻辑事件
					runEvent();
                } else if(obj.event === 'del'){
                    layer.confirm('真的删除行么', function(index){
                        obj.del();
                        layer.close(index);
                    });
                } else if(obj.event === 'edit'){
                    //传入编辑逻辑事件
                    runEvent(data);
                }else if(obj.event === 'cancel'){
                    layer.close(layerIndex);
				}
            });

            var $ = layui.$, active = {
                getCheckData: function(){ //获取选中数据
                    var checkStatus = table.checkStatus('testReload')
                        ,data = checkStatus.data;
                    if(data.length === 0){
                        layer.msg('至少也得选一个吧',{icon:2});
                        return;
					}
					var ids = '';
					for(var i = 0; i < data.length;i++){
                        ids += data[i].id + ',';
					}
					console.log(ids);
                    layer.confirm('真的确定删除吗', function(index){
                        // obj.del();
                        layer.close(index);
                    });
                },
                reload: function () {
                    var department = $('#department');
                    var employee = $('#employee');
                    var beginTime = $('#test1');
                    var endTime = $('#test2');
                    //执行重载
                    table.reload('testReload', {
                        where: {
                                department: department.val(),
                                employee: employee.val(),
                                beginTime: beginTime.val(),
                                endTime: endTime.val()
                        }
                        ,page: {
                            curr: 1
                        }
                    });
                }
            };

            $('.demoTable .layui-btn').on('click', function(){
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
			
            $('.cancel-layer').on('click',function(){
                layer.close(layerIndex);
			})

			form.on('submit(formTest)',function(data){
                   layer.alert(JSON.stringify((data.field),{
                       title:'最终提交的信息'
                   }))
					layer.close(layerIndex);
				return false;
			})

			
            var runEvent = function(){
                //初始化表单值
				if(arguments.length > 0){
				    var data = arguments[0];
                    form.val('example',{
                        'beginTime':data.beginTime,
                        'endTime':data.endTime,
                        'holidayType':data.holidayType,
						'reason':data.reason
                    })
				}else{
                    form.val('example',{
                        'beginTime':'',
                        'endTime':'',
                        'holidayType':'',
                        'reason':''
                    })
				}
                layerIndex = layer.open({
                    type: 1
                    ,title: '公出/请假设置' //不显示标题栏
                    ,area: '350px;'
                    ,shade: 0.8
                    ,id: 'LAY_layuipro2' //设定一个id，防止重复弹出
                    // ,btn: ['确定', '取消']
                    // ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: $('#addMask')
                    ,success:function(layero,index){
                        console.log(layero);
                       form.render();
                    }
					,end:function(){
                        form.val('example',{
                            'beginTime':'',
                            'endTime':'',
                            'holidayType':'',
                            'reason':''
                        })
					}
                });
			}
        });

	}


</script>
</body>
</html>